<template>
	<view class="box" v-if="is_show == 0">
		<view class="title"></view>
		<view class="form">
			<view class="upload" @click="chooseImg">
				<image :src="form.avatar" mode="" v-if="form.avatar"></image>
				<image src="/static/上传.png" mode="" v-else></image>
			</view>
			<view class="form-item">
				<view class="form-item-label">
					体检人姓名*
				</view>
				<view class="form-item-input">
					<input type="text" placeholder="请输入与就诊人姓名" placeholder-class="ac" v-model="form.name">
				</view>
			</view>
			<view class="form-item">
				<view class="form-item-label">
					证件号码*
				</view>
				<view class="form-item-input">
					<input type="text" placeholder="请输入证件号码" placeholder-class="ac" v-model="form.id_no">
				</view>
			</view>
			<view class="form-item">
				<view class="form-item-label">
					预约日期*
				</view>
				<picker mode="date" @change="changeReservationDate">
					<view class="form-item-input">

						<input type="text" placeholder="请选择预约日期" placeholder-class="ac" disabled="disabled"
							v-model="form.reservation_date">
						<image src="/static/日历.png" mode="" class="icon"></image>
					</view>
				</picker>
			</view>
			<view class="form-item">
				<view class="form-item-label">
					出生日期*
				</view>
				<picker mode="date" @change="change">
					<view class="form-item-input">

						<input type="text" placeholder="请选择出生日期" placeholder-class="ac" disabled="disabled"
							v-model="date">
						<image src="/static/日历.png" mode="" class="icon"></image>

					</view>
				</picker>
			</view>
			<view class="form-item">
				<view class="form-item-label">
					手机号*
				</view>
				<view class="form-item-input">
					<input type="text" placeholder="请输入手机号" placeholder-class="ac" v-model="form.phone">
				</view>
			</view>
			<view class="layout">
				<view class="form-item">
					<view class="form-item-label">
						性别
					</view>
					<picker mode="selector" :range="sexList" range-key="label" @change="changeSex">
						<view class="form-item-input">
							<input type="text" placeholder="请选择" placeholder-class="ac" disabled="disabled"
								v-model="sexName">
							<image src="/static/下拉.png" mode="" class="icon"></image>
						</view>
					</picker>
				</view>
				<view class="form-item">
					<view class="form-item-label">
						血型
					</view>
					<picker mode="selector" :range="bloodTypeList" range-key="label" @change="changeBloodType">
						<view class="form-item-input">
							<input type="text" placeholder="请选择" placeholder-class="ac" disabled="disabled"
								v-model="bloodTypeName">
							<image src="/static/下拉.png" mode="" class="icon"></image>
						</view>
					</picker>
				</view>
			</view>
			<view class="layout">
				<view class="form-item">
					<view class="form-item-label">
						婚姻状况
					</view>
					<picker mode="selector" :range="marriageList" range-key="label" @change="changeMarriage">
						<view class="form-item-input">
							<input type="text" placeholder="请选择" placeholder-class="ac" disabled="disabled"
								v-model="marriageName">
							<image src="/static/下拉.png" mode="" class="icon"></image>
						</view>
					</picker>
				</view>
				<view class="form-item">
					<view class="form-item-label">
						体检类型
					</view>
					<picker mode="selector" :range="checkupTypeList" range-key="label" @change="changeCheckupType">
						<view class="form-item-input">
							<input type="text" placeholder="请选择" placeholder-class="ac" disabled="disabled"
								v-model="checkupTypeName">
							<image src="/static/下拉.png" mode="" class="icon"></image>
						</view>
					</picker>
				</view>
			</view>
		</view>
		<view class="btn" @click="submit">提交</view>
	</view>
</template>

<script>
	import {
		uploadImg
	} from '@/common/upload.js'
	import {
		orderCreate,
		indexData
	} from '@/common/http/api.js'
	export default {
		data() {
			return {
				form: {
					hospital_id: '', //	医院id
					reservation_date: '', //	预约日期
					avatar: '', //	用户照片
					name: '', //	用户名称
					id_no: '', //	身份证号
					phone: '', //	联系电话
					year: '', //	出生年
					month: '', //	出生月
					day: '', //	出生日
					sex: '', //	性别，1男，2女
					blood_type: '', //血型，例：AB
					marriage: '', //	婚姻状态，0未婚，1已婚
					checkup_type: '', //	体检类型，例：入职体检
				},
				date: '',
				sexName: '',
				sexList: [{
						value: 1,
						label: '男'
					},
					{
						value: 2,
						label: '女'
					}
				],
				bloodTypeName: '',
				bloodTypeList: [{
						value: 'A',
						label: 'A型血'
					},
					{
						value: 'B',
						label: 'B型血'
					},
					{
						value: 'O',
						label: 'O型血'
					},
					{
						value: 'AB',
						label: 'AB型血'
					},
					{
						value: 'RH',
						label: 'RH型血'
					}
				],
				marriageName: '',
				marriageList: [{
						value: 0,
						label: '未婚'
					},
					{
						value: 1,
						label: '已婚'
					}
				],
				checkupTypeName: '',
				checkupTypeList: [{
						value: '身体的一般检查',
						label: '身体的一般检查'
					},
					{
						value: '各个部位器官检查',
						label: '各个部位器官检查'
					}
				],
				userInfo: {},
				is_show: 1
			};
		},
		onLoad(e) {
			indexData({
				page: 1,
				lat: 29.56471,
				lng: 106.55073
			}).then(res => {
				this.is_show = res.data.res
			})
			
			let userInfo = uni.getStorageSync('userInfo')
			if (this.userInfo) {
				this.userInfo = userInfo
				this.form.avatar = userInfo.avatar
			}
			this.form.hospital_id = e.id
		},
		methods: {
			chooseImg() {
				uploadImg().then(res => {
					console.log('res', res)
					this.form.avatar = res.data.url
				})
			},
			change(e) {
				console.log('e', e)
				let time = e.detail.value.split('-')
				this.form.year = time[0]
				this.form.month = time[1]
				this.form.day = time[2]
				this.date = e.detail.value
			},
			changeReservationDate(e) {
				console.log('e', e)
				this.form.reservation_date = e.detail.value
			},
			changeSex(e) {
				console.log('e', e)
				this.form.sex = this.sexList[e.detail.value].value
				this.sexName = this.sexList[e.detail.value].label
			},
			changeBloodType(e) {
				console.log('e', e)
				this.form.blood_type = this.bloodTypeList[e.detail.value].value
				this.bloodTypeName = this.bloodTypeList[e.detail.value].label
			},
			changeMarriage(e) {
				console.log('e', e)
				this.form.marriage = this.marriageList[e.detail.value].value
				this.marriageName = this.marriageList[e.detail.value].label
			},
			changeCheckupType(e) {
				console.log('e', e)
				this.form.checkup_type = this.checkupTypeList[e.detail.value].value
				this.checkupTypeName = this.checkupTypeList[e.detail.value].label
			},
			//提交
			async submit() {
				await this.$mValidate(
					[{
							require: true,
							key: 'avatar',
							message: '请选择用户照片'
						},
						{
							require: true,
							key: 'name',
							message: '请输入体检人姓名'
						},
						{
							require: true,
							key: 'id_no',
							message: '请输入身份证号'
						},
						{
							require: true,
							key: 'phone',
							message: '请输入联系电话'
						},
						{
							require: true,
							key: 'year',
							message: '请选择出生日期'
						},
						// {
						// 	require: true,
						// 	key: 'sex',
						// 	message: '请选择性别'
						// },
						// {
						// 	require: true,
						// 	key: 'blood_type',
						// 	message: '请选择血型'
						// },
						// {
						// 	require: true,
						// 	key: 'marriage',
						// 	message: '请选择婚姻状态'
						// },
						// {
						// 	require: true,
						// 	key: 'checkup_type',
						// 	message: '请选择体检类型'
						// },
					], this.form)
				uni.showLoading({
					mask: true
				})
				let data = {
					...this.form
				}
				orderCreate(data).then(res => {
					uni.hideLoading()
					let info = res.data
					//调用微信官方支付接口弹出付款界面,输入密码扣款
					wx.requestPayment({
						timeStamp: res.data.payment.timestamp,
						nonceStr: res.data.payment.nonceStr,
						package: res.data.payment.package,
						signType: res.data.payment.signType,
						paySign: res.data.payment.paySign,
						success: res => {
							console.log('支付成功', res);
							uni.showToast({
								title: '支付成功',
								icon: 'none'
							})
							setTimeout(() => {
								uni.setStorageSync('orderInfo', info)
								uni.redirectTo({
									url: '/pages/my-promotion/detail'
								})
							}, 1500)
						},
						fail: function(err) {
							console.log('支付失败', err);
						}
					})
					// uni.showToast({
					// 	title: '提交成功',
					// 	icon: 'none'
					// })
					// setTimeout(()=>{
					// 	uni.navigateBack()
					// },1500)
				})
			}
		}
	}
</script>

<style lang="scss">
	.box {
		width: 100%;
		box-sizing: border-box;
		padding: 0 40rpx;
		padding-bottom: 40rpx;
	}

	.title {
		color: #112950;
		font-family: "PingFang SC";
		font-size: 48rpx;
		margin: 40rpx 0;
	}

	.form {
		width: 100%;

		.upload {
			width: 100%;
			margin-bottom: 64rpx;

			image {
				width: 144rpx;
				height: 144rpx;
				border-radius: 50%;
			}
		}

		.form-item {
			width: 100%;
			padding-bottom: 32rpx;
			border-bottom: 2rpx solid #E5E5E5;
			margin-bottom: 40rpx;

			.form-item-label {
				width: 100%;
				color: #112950;
				font-family: "PingFang SC";
				font-size: 24rpx;
				margin-bottom: 12rpx;
			}

			.form-item-input {
				width: 100%;
				display: flex;

				input {
					flex: 1;
					min-width: 0;
					color: #000;
					font-family: "PingFang SC";
					font-size: 30rpx;
				}

				.ac {
					color: #b2bac6;
					font-family: "PingFang SC";
					font-size: 30rpx;
				}

				.icon {
					width: 40rpx;
					height: 40rpx;
					margin-left: 30rpx;
				}
			}
		}
	}

	.layout {
		display: flex;

		.form-item:first-child {
			margin-right: 48rpx;
		}
	}

	.btn {
		width: 654rpx;
		height: 108rpx;
		flex-shrink: 0;
		border-radius: 24rpx;
		background: #0065FF;
		margin: 0 auto;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #ffffff;
		text-align: center;
		font-family: "PingFang SC";
		font-size: 34rpx;
		font-style: normal;
		font-weight: 400;
	}
</style>